<template>
    <!-- 营业执照 -->
    <el-upload :on-change="handleChange" :auto-upload="false" :show-file-list="false" :disabled="disabled">
        <div slot="trigger" class="upload_button" v-if="!url">
            <div>
                <el-icon size="20">
                    <Plus />
                </el-icon>
                <div>上传文件</div>
            </div>
        </div>
        <div class="living-example" v-if="url">
            <div class="living-example_img">
                <img :src="url" />
            </div>
            <!-- <div @click.stop="handleFileDel()" class="living-example_del pointer">
        <el-icon size="20">
          <Close />
        </el-icon>
      </div> -->
        </div>
    </el-upload>
</template>
<script setup>
import { ref, getCurrentInstance, computed, onMounted } from "vue";
import { Plus, Close } from "@element-plus/icons-vue";
const { proxy } = getCurrentInstance();
import { useTrigger } from "@/hooks/useValidatorRules.js";
const emits = defineEmits(["update:modelValue"]);
const { emitTrigger } = useTrigger();
const props = defineProps({
    modelValue: {
        type: String,
        default: "",
    },
    disabled: {
        type: Boolean,
        default: false,
    },
});
const url = computed({
    get: () => {
        return props.modelValue;
    },
    set: (file) => {
        // emits("update:modelValue", file);
        emitTrigger();
    },
});

const handleFileDel = () => {
    url.value = "";
};
const handleChange = (file) => {
    const formData = new FormData();
    formData.append("uploadFile", file.raw);
    proxy.$post({ url: "/upload", data: formData }).then((res) => {
        url.value = res.url;
    });
};
</script>
<style lang="less" scoped>
.upload_button {
    width: 90px;
    height: 90px;
    line-height: 24px;
    background: #fafafa;
    border-radius: 5px;
    border: 1px dashed rgba(0, 0, 0, 0.17);
    display: flex;
    justify-content: center;
    align-items: center;
    .el-icon {
        color: rgba(0, 0, 0, 0.45);
        text-align: center;
        margin-top: 12px;
    }
    div {
        font-size: 12px;
        color: #595959;
        text-align: center;
    }
}
.living-example {
    position: relative;
    .living-example_img {
        width: 90px;
        height: 90px;
        border: 1px dashed rgba(0, 0, 0, 0.17);
    }
}
</style>